/* index.css - 鹿角软件全局样式表 */

:root {
    --bg-color: rgb(239, 241, 245);
    --content-bg: white;
    --link-bg: rgba(247, 247, 247, 0.822);
    --text-color: rgba(0, 0, 0, 0.9);
    --border-color: rgb(224, 228, 233);
    --hover-bg: #ffe59d;
    --brand-color: #ff5500;
    --float-btn-bg: #e6e8eb;
}

html { overflow: hidden; }

html.dark-mode {
    --bg-color: #1a1a1a;
    --content-bg: #262626;
    --link-bg: #333333;
    --text-color: #e0e0e0;
    --border-color: #444444;
    --hover-bg: #404040;
    --brand-color: #c27042;
    --float-btn-bg: #3a3a3a;
}

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    font-family: -apple-system,HarmonyOS_Regular,HarmonyOS_Medium,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
}

a, a:link, a:visited, a:hover, a:active { text-decoration: none; color:inherit; }

body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s, color 0.3s; }

.header { display: flex; background-color: rgb(0, 0, 0); height: 220px; justify-content: center; align-items: center; flex-shrink: 0; }
.logo { display: flex; flex-direction: column; align-items: center; }
.logo img { height: 120px; }

.neirong { flex: 1; display: flex; justify-content: center; padding-bottom: 20px; overflow: hidden; }
.ruanjian { display: flex; width: 100%; max-width: 1000px; height: 100%; }

.sidebar { display: flex; flex-direction: column; width: 130px; flex-shrink: 0; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;}
.mulu { display: flex; height: 20px; margin: 10px; padding: 5px; justify-content: center; align-items: center; background-color: var(--bg-color); border-radius: 5px; transition: background-color 0.3s; flex-shrink: 0; }
.mulu a { color: var(--text-color); font-size: 15px; font-weight: 500; display: block; width: 100%; text-align: center; }

.xiazai { flex-grow: 1; display: block; margin-left: 20px; margin-top: 10px; background-color: var(--content-bg); padding: 15px; height: calc(100% - 10px); overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; box-sizing: border-box; transition: background-color 0.3s; border-radius: 8px; -webkit-overflow-scrolling: touch;}

.sw-title { cursor: pointer; display: flex; height: 55px; align-items: center; color: var(--brand-color); font-size: 22px; font-weight: 500; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); transition: color 0.3s; }
.sw-title span { display: flex; align-items: center; }
.down-arrow { align-self: center; color: #ff5d5d; cursor: pointer; display: inline-block; margin: 0 -8px 0 0; vertical-align: middle; transition: transform .2s linear; }
.cursor { cursor: pointer; }
i.iconfont { font-size: 18px; font-weight: bold; }
.sw-item { display: flex; flex-wrap: wrap; }

.dlink { display: flex; width: 50%; }
.link { display: flex; margin: 10px; width: 100%; max-width: 410px; height: 50px; align-items: center; background-color: var(--link-bg); border-radius: 8px; transition: background-color 0.3s; cursor: pointer; }
.link:hover { background-color: var(--hover-bg); }
.link img { border-radius: 4px; border: 1px solid transparent; transition: all 0.3s; }
html.dark-mode .link img { border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 0 6px rgba(255, 255, 255, 0.08); background-color: rgba(255, 255, 255, 0.05); }
.link a { flex-grow: 1; font-size: 18px; margin: 0 10px; font-weight: 500; color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bottom-right { display: flex; flex-direction: column; gap: 12px; width: 44px; position: fixed; bottom: 80px; right: 20px; }
.bottom-icon { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; background-color: var(--float-btn-bg); border-radius: 50%; position: relative; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.1); color: var(--text-color); transition: transform 0.2s, background-color 0.3s; }
.bottom-icon:hover { transform: scale(1.1); }
.icon-link { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.icon img { width: 20px; display: block; }

.qrcode { display: flex; justify-content: center; align-items: center; background-color: var(--content-bg); border: 1px solid var(--border-color); border-radius: 8px; position: absolute; right: 60px; visibility: hidden; opacity: 0; transition: visibility 0.3s, opacity 0.3s linear; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.qrcode img { width: 160px; margin: 10px; }
.icon-wechat:hover .qrcode, .icon-appreciation:hover .qrcode { visibility: visible; opacity: 1; }
.theme-toggle svg { fill: none; stroke: currentColor; stroke-width: 2; }

@media screen and (max-width: 1280px) {
    .header { flex-direction: column; height: 135px; }
    .logo img { height: 80px; }
    .sidebar { width: 80px; }
    .mulu a { font-size: 12px; }
    .xiazai { margin-left: 10px; }
}
@media screen and (max-width: 768px) {
    .dlink { width: 100%; }
    .ruanjian { padding: 0 10px; }
}

#menu_download img, #menu_unzip img { max-width: 100%; height: auto; display: block; margin-top: 10px; }
#menu_download p, #menu_unzip p { width: 100%; clear: both; }
html.dark-mode .down-arrow { color: var(--brand-color); }

.text-tutorial-btn { display: inline-flex; align-items: center; justify-content: center; padding: 3px 8px; margin-right: 15px; border-radius: 4px; background-color: rgba(150, 150, 150, 0.12); color: var(--text-color) !important; font-size: 12px; border: 1px solid rgba(150, 150, 150, 0.2); transition: all 0.2s ease; }
.text-tutorial-btn:hover { background-color: rgba(150, 150, 150, 0.25); transform: scale(1.02); }

footer { color: #969696; padding: 12px 20px; text-align: center; width: 100%; box-sizing: border-box; flex-shrink: 0; font-size: 13px; line-height: 1.5; }
footer p { margin-bottom: 2px; }

.jieshao { display: flex; height: 70px; justify-content: center; align-items: center; flex-shrink: 0; border-bottom: 1px solid var(--border-color); width: 100%; max-width: 1000px; margin: 0 auto 5px auto; }
.search-box { width: 100%; max-width: 500px; padding: 0 20px; }
.search-box input { width: 100%; padding: 10px 20px; border: 2px solid var(--border-color); border-radius: 30px; outline: none; background-color: var(--content-bg); color: var(--text-color); font-size: 15px; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); box-sizing: border-box; }
.search-box input:focus { border-color: var(--brand-color); box-shadow: 0 0 0 4px rgba(255, 85, 0, 0.1); }

.xiazai::-webkit-scrollbar, .sidebar::-webkit-scrollbar { width: 6px; height: 6px; }
.xiazai::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb { background-color: rgba(150, 150, 150, 0.3); border-radius: 10px; }
html.dark-mode .xiazai::-webkit-scrollbar-thumb, html.dark-mode .sidebar::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); }
html.dark-mode .xiazai::-webkit-scrollbar-thumb:hover, html.dark-mode .sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.4); }
.xiazai, .sidebar { scrollbar-width: thin; scrollbar-color: rgba(150, 150, 150, 0.4) transparent; }

/* ==========================================
   iOS 风格版 - 多源下载弹窗 
   ========================================== */
.download-modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.4); 
    backdrop-filter: blur(12px); /* iOS 的标志性强毛玻璃 */
    -webkit-backdrop-filter: blur(12px); /* 兼容 Safari */
    z-index: 10000; justify-content: center; align-items: center;
    opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.download-modal-overlay.show { display: flex; opacity: 1; }

.download-modal-container {
    background-color: var(--content-bg); 
    border-radius: 24px; /* iOS 偏爱超大圆角 */
    width: 85%; max-width: 320px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); 
    border: 1px solid rgba(150, 150, 150, 0.1); /* 去掉生硬的边框，改为极淡的过渡 */
    overflow: hidden; 
    transform: scale(0.9) translateY(10px); 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}
.download-modal-overlay.show .download-modal-container { 
    transform: scale(1) translateY(0); 
}

.download-modal-header {
    display: flex; justify-content: center; /* iOS 标题居中 */
    align-items: center; position: relative;
    padding: 22px 20px 12px 20px; background-color: var(--content-bg);
}
/* iOS 标题偏向于干净的深灰色或跟随主题 */
.modal-title { font-size: 16px; font-weight: 600; color: var(--text-color); }

/* iOS 原生质感关闭按钮 */
.modal-close-btn {
    position: absolute; right: 16px; 
    background-color: #f2f2f7; /* iOS 系统标准浅灰底色 */
    border: none; cursor: pointer; color: #8e8e93; /* iOS 系统标准灰色叉号 */
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    transition: opacity 0.2s; /* iOS 的点击反馈通常是改变透明度 */
}
.modal-close-btn:hover { 
    opacity: 0.6; 
}
/* 完美融入你的夜间模式 */
html.dark-mode .modal-close-btn {
    background-color: #3a3a3c;
    color: rgba(235, 235, 245, 0.6);
}

.download-modal-body { padding: 10px 20px 24px 20px; display: flex; flex-direction: column; gap: 12px; }

/* 按钮样式微调更像 iOS */
.download-option-btn {
    display: flex; align-items: center; gap: 14px; padding: 14px 18px;
    background-color: rgba(150, 150, 150, 0.06); /* 苹果喜欢微妙的底色 */
    border-radius: 16px; text-decoration: none;
    color: var(--text-color); font-weight: 500; border: 1px solid transparent; 
    transition: all 0.2s ease;
}
.download-option-btn:hover {
    background-color: rgba(150, 150, 150, 0.12); transform: scale(1.02); /* 取消右移，改为苹果的微缩放 */
}
html.dark-mode .download-option-btn { background-color: rgba(255, 255, 255, 0.05); }

/* 自定义图片的样式 */
.platform-icon-img { 
    width: 24px; height: 24px; border-radius: 6px; object-fit: contain;
}